import { observer } from 'mobx-react-lite';
import { Text, View } from '@tarojs/components';
import TagComp from '@/components/Tag';
import BusinessConstant from '@/constant/BusinessConstant';
import ImageComp from '@/components/Image';
import ImageConstant from '@/constant/ImageConstant';
import { CommonUtil } from '@/utils/CommonUtil';
import { ImagePreview, Video } from '@nutui/nutui-react-taro';
import { useEffect, useState } from 'react';
import './index.less';

interface IProps {
  key?: number;
  status: number;
  reason: string;
  createdAt: Date;
  updatedAt: Date;
  images: string[];
  video: string;
  FooterSlotComp?: JSX.Element;
  isSlot?: boolean;
}

function ComplaintCard(props: IProps) {
  const {
    key = new Date().toString(),
    status,
    reason,
    createdAt,
    updatedAt,
    images,
    video,
    FooterSlotComp,
    isSlot,
  } = props;

  const [currentImagePreview, setCurrentImagePreview] = useState<Array<{ src: string }>>();
  const [videoPreview, setVideoPreview] = useState<{ src: string, type: string }>();
  const [imagePreviewVisible, setImagePreviewVisible] = useState(false);
  const [videoPreviewVisible, setVideoPreviewVisible] = useState(false);
  const [previewPoint, setPreviewPoint] = useState(1);
  const [statusTag, setStatusTag] = useState({tag: '', bg: ''});

  const handleStatusTag = () => {
    if (status === BusinessConstant.COMPLAINT_COMPLETE) {
      setStatusTag({
        tag: '已处理',
        bg: 'var(--mini-first)'
      });
    } else if (status === BusinessConstant.COMPLAINT_DEL) {
      setStatusTag({
        tag: '已删除',
        bg: 'var(--mini-fifth)'
      });
    } else if (status === BusinessConstant.COMPLAINT_PENDING) {
      setStatusTag({
        tag: '未处理',
        bg: 'var(--bg-fourth)'
      });
    }
  };

  useEffect(() => {
    handleStatusTag();
  }, []);

  /**
   * 查看图片
   * @param images
   * @param idx
   */
  const toLookImage = (images: string[], idx: number) => {
    setCurrentImagePreview(images.map((src: string) => ({src: `${ ImageConstant.SERVER_ROOT }/${ src }`})));
    setPreviewPoint(idx + 1);
    setImagePreviewVisible(true);
  };

  /**
   * 查看视频
   * @param video
   */
  const toLookVideo = (video: string) => {
    setVideoPreview({
      src: `${ ImageConstant.SERVER_ROOT }/${ video }`,
      type: 'video/mp4'
    });
    setVideoPreviewVisible(true);
  };

  /**
   * 视频点击
   */
  const clickVideo = () => {
    setVideoPreviewVisible(false);
  };

  return (
    <View>
      <View className='complaint-card-container' key={ key }>
        <View className='complaint-status'>
          <Text>状态：</Text>
          <TagComp
            content={ statusTag.tag }
            bgColor={ statusTag.bg }
          />
        </View>
        <View className='complaint-content'>
          <View className='reason'>
            <Text style={ {whiteSpace: 'nowrap'} }>投诉问题描述：</Text>
            <Text>{ reason }</Text>
          </View>
          <View className='medium-wrap'>
            {
              images.map((url: string, i: number) => {
                return (
                  <ImageComp
                    src={ url }
                    className='complaint-image'
                    onClick={ () => toLookImage(images, i) }
                  />
                );
              })
            }
            {
              video && <ImageComp
                src={ ImageConstant.DEFAULT_VIDEO_COVER_IMG }
                className='complaint-image'
                onClick={ () => toLookVideo(video) }
              /> }
          </View>
          <View className='complaint-date'>
            <Text>投诉申请日期：</Text>
            <Text className='date'>{ CommonUtil.formatUtcTime(createdAt) }</Text>
          </View>
          { status === BusinessConstant.COMPLAINT_COMPLETE || status === BusinessConstant.COMPLAINT_DEL ?
            <View className='complaint-date'>
              <Text>投诉处理完成日期：</Text>
              <Text className='date'>{ CommonUtil.formatUtcTime(updatedAt) }</Text>
            </View> : null
          }
        </View>
        { isSlot ? FooterSlotComp : null }
      </View>
      <ImagePreview
        images={ currentImagePreview }
        visible={ imagePreviewVisible }
        defaultValue={ previewPoint }
        onClose={ () => setImagePreviewVisible(false) }
      />
      {
        videoPreviewVisible ?
          (<Video
            source={ videoPreview }
            style={ {height: '100vh', position: 'absolute', top: '0', left: '0', zIndex: '99'} }
            loop={ true }
            autoplay={ true }
            onClick={ clickVideo }
          />) : null
      }
    </View>
  );
}

export default observer(ComplaintCard);